<template>
  <el-dialog title="模块编辑" :visible.sync="dialog_visible">
    <div class="form-padding">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        auto-complete="on"
        label-width="90px"
        style="width: 100%"
      >
        <el-form-item label="序号" prop="id">
          <el-input disabled v-model="temp.id" />
        </el-form-item>
        <el-form-item label="模块名称" prop="module_name">
          <el-input v-model="temp.module_name" />
        </el-form-item>
        <el-form-item label="父权限码" prop="pguid">
          <el-tooltip
            class="item"
            effect="dark"
            content="要经过开发者确认"
            placement="right"
          >
            <el-input v-model="temp.pguid" />
          </el-tooltip>
        </el-form-item>
        <el-form-item disabled label="权限码" prop="guid">
          <el-input disabled v-model="temp.guid" />
        </el-form-item>
        <el-form-item label="模块地址" prop="url">
          <el-input v-model="temp.url" />
        </el-form-item>
        <el-form-item label="模块状态" prop="state">
          <el-select
            v-model="temp.state"
            style="width: 100%"
            placeholder="请选择一个状态"
          >
            <el-option
              v-for="{ key, name } in stateOptions"
              :key="'stata' + key"
              :label="name"
              :value="Number(key)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="create_time">
          <el-date-picker
            disabled
            v-model="temp.create_time"
            style="width: 100%"
            type="datetime"
            placeholder=""
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getlist, stateOptions, update } from "@/api/right_module";
export default {
  name: "moduleEdit",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    const validatemodule_name = (rule, value, callback) => {
      if (value.length > 50) {
        callback(new Error("模块名称不能太长！"));
      } else {
        callback();
      }
    };
    return {
      stateOptions: [],
      temp: {
        id: 0,
        pguid: 1,
        guid: "",
        module_name: "",
        url: "",
        state: "",
        create_time: "",
      },
      rules: {
        module_name: [
          { required: true, message: "模块名称不能为空", trigger: "blur" },
          { required: true, trigger: "blur", validator: validatemodule_name },
        ],
      },
    };
  },
  computed: {
    dialog_visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        this.temp = Object.assign({}, this.data);
        // 当 watchedObject 或其内部属性变化时，这个函数被调用
      },
      deep: true,
    },
  },
  created() {
    this.stateOptions = stateOptions;
  },
  methods: {
    cancel() {
      this.dialog_visible = false;
    },
    submit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          const param = {
            id: this.temp.id,
            pguid: this.temp.pguid,
            module_name: this.temp.module_name,
            url: this.temp.url,
            state: this.temp.state,
          };
          update(param).then((response) => {
            if (response.data > 0) {
              setTimeout(() => {
                this.dialog_visible = false;
                this.$message({
                  type: "success",
                  message: "模块修改成功!",
                });
                this.$emit("success", param);
              }, 500);
            } else {
              this.$message({
                type: "info",
                message: "模块修改失败",
              });
            }
          });
        }
      });
    },
  },
};
</script>